<template>
  <div class="statisticsAnalysis zy-content">
    <div>
      <div class="searchBox search-box-layout">
        <Row :gutter="24">
<!--          <Col span="4">-->
<!--            <div>-->
<!--              <p class="label">{{ $t("equipmentscrapped.Location") }}</p>-->
<!--              <div class="ipt">-->
<!--                <Cascader-->
<!--                  clearable-->
<!--                  :data="orgList"-->
<!--                  v-model="searchParams.hierarchyCode"-->
<!--                  :placeholder="$t('common.PleaseSelect')"-->
<!--                  change-on-select-->
<!--                ></Cascader>-->
<!--              </div>-->
<!--            </div>-->
<!--          </Col>-->
          <Col span="6">
            <div>
              <p class="label">{{ $t('equipmentscrapped.Location') }}</p>
              <div class="ipt">
                <Cascader :value.sync="searchParams.orgCodes"/>
<!--                <Cascader clearable :data="orgList" v-model="searchParams.orgCode"-->
<!--                          :placeholder="$t('common.PleaseSelect')"-->
<!--                          change-on-select></Cascader>-->
              </div>
            </div>
          </Col>
          <Col span="4">
            <div>
              <p class="label">{{ $t("设备类别") }}</p>
              <div class="ipt">
                <Select
                  v-model="searchParams.deviceType"
                  filterable
                  clearable
                  :placeholder="`${$t('common.selectInfo')}`"
                  @on-change="deviceNameChange"
                >
                  <Option
                    v-for="(item, index) of deviceTypeList"
                    :value="item.value"
                    :key="index"
                    :label="item.value"
                  />
                </Select>
              </div>
            </div>
          </Col>
          <Col span="4">
            <div>
              <p class="label">{{ $t("maintenance.EquipmentName") }}</p>
              <div class="ipt">
                <Select
                  filterable
                  v-model="searchParams.deviceNo"
                  :remote-method="remoteMethod1"
                  :loading="loading1"
                  clearable
                  :placeholder="`${$t('common.PleaseEenter')}`"
                >
                  <Option
                    v-for="item of equipmentList"
                    :value="item.deviceNo"
                    :key="item.deviceNo"
                    :label=" item.deviceNo + '-' + item.deviceName + '-' + item.deviceMId"
                    ></Option>
                </Select>
              </div>
            </div>
          </Col>
          <Col span="4">
            <div>
              <p class="label">{{ $t("maintenance.plan") }}</p>
              <div class="ipt">
                <Select
                  v-model="searchParams.planId"
                  filterable
                  clearable
                  :transfer="true"
                  :placeholder="`${$t('common.inputInfo')}`"
                  :remote-method="getCenterList"
                >
                  <Option
                    v-for="(item, index) of planList"
                    :value="item.value"
                    :key="index"
                    :label="item.label"
                    >
                  </Option>
                </Select>
              </div>
            </div>
          </Col>
          <Col span="4">
            <div>
              <p class="label">{{ $t("maintenance.MaintenanceLevel") }}</p>
              <div class="ipt">
                <Select
                  v-model="searchParams.itemLevel"
                  clearable
                  :transfer="true"
                  :placeholder="`${$t('common.selectInfo')}`"
                >
                  <Option
                    v-for="item of levelList"
                    :value="item.key"
                    :label="item.name"
                    :key="item.key"
                    >
                  </Option>
                </Select>
              </div>
            </div>
          </Col>
          <Col span="6">
            <div>
              <p class="label">{{ $t("maintenance.MaintenanceBy") }}</p>
              <div class="ipt">
                <Select
                  v-model="searchParams.operater"
                  filterable
                  clearable
                  :transfer="true"
                  :placeholder="`${$t('common.inputInfo')}`"
                  @on-query-change="timeOutgetUserNo"
                >
                  <Option
                    v-for="(item, index) of userNoArr"
                    :value="item.empno"
                    :key="index"
                    :label="item.empno + '-' + item.realname"
                  >
                  </Option>
                </Select>
              </div>
            </div>
          </Col>


          <Col span="5">
            <div>
              <p class="label hide-label">--</p>
              <div class="ipt">
                <Button
                  class="search-btn"
                  type="primary"
                  @click="searchList()"
                  >{{ $t("common.Query") }}</Button
                >
                <Button class="reset-btn" @click="reset()"
                  >{{ $t("common.reset") }}
                </Button>
              </div>
            </div>
          </Col>
        </Row>
      </div>
      <div class="list-layout mt16">
        <div class="btns clear">
          <span class="title">{{ $t("maintenance.statisticalAnalysis") }}</span>
        </div>
        <div class="tableContent">
          <Row :gutter="24">
            <Col span="6">
              <div class="tableBox">
                <div class="boxtitle">{{ $t("fault.MaintenanceHours") }}</div>
                <div class="boxNum">{{ box1.duration }}<span>h</span></div>
                <div class="boxRate">
                  <span
                    >{{ $t("fault.Monthly") }} {{ box1.monthNum }}
                    <Icon
                      type="md-arrow-dropup"
                      color="rgb(245,34,45)"
                      size="24"
                      v-if="box1.upMonth"
                    />
                    <Icon
                      type="md-arrow-dropdown"
                      color="rgb(143,217,107)"
                      size="24"
                      v-if="box1.downMonth"
                    />
                  </span>
                  <span
                    >{{ $t("fault.Daily") }} {{ box1.dayNum }}
                    <Icon
                      type="md-arrow-dropup"
                      color="rgb(245,34,45)"
                      size="24"
                      v-if="box1.upDay"
                    />
                    <Icon
                      type="md-arrow-dropdown"
                      color="rgb(143,217,107)"
                      size="24"
                      v-if="box1.downDay"
                    />
                  </span>
                </div>
                <div class="boxBottom">
                  <span>{{ $t("fault.AvgMaintenanceDuration") }}</span>
                  <span>{{ box1.avgDuration }}h</span>
                </div>
              </div>
            </Col>
            <Col span="6">
              <div class="tableBox">
                <div class="boxtitle">{{ $t("fault.AchievementRate") }}</div>
                <div class="boxRatio">
                  <div class="ratio1">{{ box2.maintenanceRate }}%</div>
                  <div class="ratio2">
                    <div class="ratioLine">
                      <div
                        class="lineBox"
                        :style="`width:${box2.maintenanceRate}%`"
                      ></div>
                    </div>
                    <div class="ratioLine1">
                      <div
                        class="lineBox"
                        :style="`width:${box2.targetValue}%`"
                      ></div>
                    </div>
                  </div>
                </div>
                <div class="boxRate">
                  <span
                    >{{ $t("fault.Monthly") }} {{ box2.monthNum }}
                    <Icon
                      type="md-arrow-dropup"
                      color="rgb(245,34,45)"
                      size="24"
                      v-if="box2.upMonth"
                    />
                    <Icon
                      type="md-arrow-dropdown"
                      color="rgb(143,217,107)"
                      size="24"
                      v-if="box2.downMonth"
                    />
                  </span>
                  <span
                    >{{ $t("fault.Daily") }} {{ box2.dayNum }}
                    <Icon
                      type="md-arrow-dropup"
                      color="rgb(245,34,45)"
                      size="24"
                      v-if="box2.upDay"
                    />
                    <Icon
                      type="md-arrow-dropdown"
                      color="rgb(143,217,107)"
                      size="24"
                      v-if="box2.downDay"
                    />
                  </span>
                </div>
                <div class="boxBottom">
                  <span>{{ $t("fault.AvgAchievement") }}</span>
                  <span>{{ box2.avgMaintenanceRate }}%</span>
                </div>
              </div>
            </Col>
            <Col span="6">
              <div class="tableBox">
                <div class="boxtitle">
                  {{ $t("fault.TotalMaintenanceCost") }}
                </div>
                <div class="boxNum">￥{{ box3.maintenancePrice }}</div>
                <div class="boxRate">
                  <span
                    >{{ $t("fault.Monthly") }} {{ box3.monthNum }}
                    <Icon
                      type="md-arrow-dropup"
                      color="rgb(245,34,45)"
                      size="24"
                      v-if="box3.upMonth"
                    />
                    <Icon
                      type="md-arrow-dropdown"
                      color="rgb(143,217,107)"
                      size="24"
                      v-if="box3.downMonth"
                    />
                  </span>
                  <span
                    >{{ $t("fault.Daily") }} {{ box3.dayNum }}
                    <Icon
                      type="md-arrow-dropup"
                      color="rgb(245,34,45)"
                      size="24"
                      v-if="box3.upDay"
                    />
                    <Icon
                      type="md-arrow-dropdown"
                      color="rgb(143,217,107)"
                      size="24"
                      v-if="box3.downDay"
                    />
                  </span>
                </div>
                <div class="boxBottom">
                  <span>{{ $t("fault.AvgMaintenanceCuration") }}</span>
                  <span>￥{{ box3.avgMaintenancePrice }}</span>
                </div>
              </div>
            </Col>
            <Col span="6">
              <div class="tableBox">
                <div class="boxtitle">COT</div>
                <div class="boxRatio">
                  <div class="ratio1">{{ box4.maintenanceRate }}%</div>
                  <div class="ratio2">
                    <div class="ratioLine">
                      <div
                        class="lineBox"
                        :style="`width:${box4.maintenanceRate}%`"
                      ></div>
                    </div>
                    <div class="ratioLine1">
                      <div
                        class="lineBox"
                        :style="`width:${box4.targetValue}%`"
                      ></div>
                    </div>
                  </div>
                </div>
                <div class="boxRate">
                  <span
                    >{{ $t("fault.Monthly") }} {{ box4.monthNum }}
                    <Icon
                      type="md-arrow-dropup"
                      color="rgb(245,34,45)"
                      size="24"
                      v-if="box4.upMonth"
                    />
                    <Icon
                      type="md-arrow-dropdown"
                      color="rgb(143,217,107)"
                      size="24"
                      v-if="box4.downMonth"
                    />
                  </span>
                  <span
                    >{{ $t("fault.Daily") }} {{ box4.dayNum }}
                    <Icon
                      type="md-arrow-dropup"
                      color="rgb(245,34,45)"
                      size="24"
                      v-if="box4.upDay"
                    />
                    <Icon
                      type="md-arrow-dropdown"
                      color="rgb(143,217,107)"
                      size="24"
                      v-if="box4.downDay"
                    />
                  </span>
                </div>
                <div class="boxBottom">
                  <span>{{ $t("fault.AverageCOT") }}</span>
                  <span>{{ box4.avgMaintenanceRate }}%</span>
                </div>
              </div>
            </Col>
          </Row>
          <Row class-name="tabsTitle">
            <Col span="24">
              <Tabs @on-click="goEchart">
                <TabPane :label="$t('fault.Hours')" name="1"></TabPane>
                <TabPane :label="$t('fault.Achievement')" name="2"></TabPane>
                <TabPane :label="$t('fault.Cost')" name="3"></TabPane>
                <TabPane :label="$t('fault.Capacity')" name="4"></TabPane>
              </Tabs>
            </Col>
            <div class="tabsBtn">
              <RadioGroup v-model="dateType" type="button">
                <Radio label="1">{{ $t("fault.DailyS") }}</Radio>
                <Radio label="2">{{ $t("fault.MonthlyS") }}</Radio>
                <Radio label="3">{{ $t("fault.Annual") }}</Radio>
              </RadioGroup>
              <div class="picker" v-if="dateType === '1'">
                <DatePicker
                  type="daterange"
                  v-model="timeList"
                  split-panels
                  style="width: 400px"
                  placement="bottom"
                  :clearable="false"
                ></DatePicker>
              </div>
              <div class="picker" v-if="dateType === '2'">
                <DatePicker
                  type="month"
                  v-model="timeMonth1"
                  style="width: 200px"
                  placement="bottom-end"
                  :clearable="false"
                ></DatePicker>
                <DatePicker
                  type="month"
                  v-model="timeMonth2"
                  style="width: 200px"
                  :clearable="false"
                ></DatePicker>
              </div>
              <div class="picker" v-if="dateType === '3'">
                <DatePicker
                  type="year"
                  v-model="timeYear1"
                  style="width: 200px"
                  placement="bottom-end"
                  :clearable="false"
                ></DatePicker>
                <DatePicker
                  type="year"
                  v-model="timeYear2"
                  style="width: 200px"
                  :clearable="false"
                ></DatePicker>
              </div>
            </div>
            <Col span="18">
              <div id="echartId" class="echartBox"></div>
            </Col>
            <Col span="6">
              <div class="tabletitle">
                <span>{{ $t("fault.MaintenanceRanking") }}</span>
              </div>
              <div class="coltitle">
                  <div class="header">
                      <div class="item" style="width: 20%" >{{$t('排名')}}</div>
                      <div class="item" style="width: 30%" >{{$t('姓名')}}</div>
                      <div class="item" style="width: 20%" >COT</div>
                      <div class="item" style="width: 30%">{{$t('维保工时')}}</div>
                  </div>
                <div class="list" v-for="(item, index) of numList" :key="index">
                  <div style="width: 20%" class="item">
                    <div class="" v-if="index + 1===1">🥇</div>
                    <div class="" v-else-if="index + 1===2">🥈</div>
                    <div class="" v-else-if="index + 1===3">🥉</div>
                    <div class="num" v-else>{{ index + 1 }}</div>
                  </div>
                  <div style="width: 30%" class="item">{{ item.name }}</div>
                  <div style="width: 20%" class="item">{{ item.cot }}%</div>
                  <div style="width: 30%" class="item">
                    {{ item.duration }}h
                  </div>
                </div>
              </div>
            </Col>
          </Row>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import recursion from "../../../util/recursion";
import * as echarts from "echarts";
import Cascader from '@/components/Cascader'
let myChart;
export default {
  name: "statisticsAnalysis",
  components: {Cascader},
  data() {
    return {
      numList: [],
      timeList: [
        this.$moment(new Date()).subtract(6, "days").format("YYYY-MM-DD"),
        this.$moment(new Date()).format("YYYY-MM-DD"),
      ],
      timeMonth1: this.$moment(new Date()).format("YYYY-MM"),
      timeMonth2: this.$moment(new Date()).format("YYYY-MM"),
      timeYear1: this.$moment(new Date()).format("YYYY"),
      timeYear2: this.$moment(new Date()).format("YYYY"),
      openMonthShowF: false,
      openYearShowF: false,
      searchParams: {},
      deviceList: ["A", "B", "C"],
      dataSource: [],
      dateType: "1",
      box1: {},
      box2: {},
      box3: {},
      box4: {},
      echartType: "1",
      timeout: null,
      deviceTypeList: [],
      equipmentList: [],
      loading1: false,
      planList: [],
      levelList: [
        { name: `${this.$t("一级保养")}`, key: 1 },
        { name: `${this.$t("二级保养")}`, key: 2 },
        { name: `${this.$t("三级保养")}`, key: 3 },
      ],
      userNoArr: [],
      orgList:[]
    };
  },
  watch: {
    dateType: function () {
      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        this.goEchart(this.echartType);
      }, 500);
    },
    timeYear1: function () {
      if (
        this.timeYear1 != "" &&
        this.dateType === "3" &&
        this.timeYear2 != ""
      ) {
        const startTime = new Date(this.$moment(this.timeYear1));
        const endTime = new Date(this.$moment(this.timeYear2));
        if (startTime > endTime) {
          this.timeYear2 = this.$moment(startTime).format("YYYY");
          this.$Message.warning("开始时间不能大于结束时间");
          return;
        }
        clearTimeout(this.timeout);
        this.timeout = setTimeout(() => {
          this.goEchart(this.echartType);
        }, 500);
      }
    },
    timeYear2: function () {
      if (
        this.timeYear1 != "" &&
        this.dateType === "3" &&
        this.timeYear2 != ""
      ) {
        const startTime = new Date(this.$moment(this.timeYear1));
        const endTime = new Date(this.$moment(this.timeYear2));
        if (startTime > endTime) {
          this.timeYear2 = this.$moment(startTime).format("YYYY");
          this.$Message.warning("开始时间不能大于结束时间");
          return;
        }
        clearTimeout(this.timeout);
        this.timeout = setTimeout(() => {
          this.goEchart(this.echartType);
        }, 500);
      }
    },
    timeMonth1: function () {
      if (
        this.timeMonth1 != "" &&
        this.dateType === "2" &&
        this.timeMonth2 != ""
      ) {
        const startTime = new Date(this.$moment(this.timeMonth1));
        const endTime = new Date(this.$moment(this.timeMonth2));
        if (startTime > endTime) {
          this.timeMonth2 = this.$moment(startTime).format("YYYY-MM");
          this.$Message.warning("开始时间不能大于结束时间");
          return;
        }
        clearTimeout(this.timeout);
        this.timeout = setTimeout(() => {
          this.goEchart(this.echartType);
        }, 500);
      }
    },
    timeMonth2: function () {
      if (
        this.timeMonth1 != "" &&
        this.dateType === "2" &&
        this.timeMonth2 != ""
      ) {
        const startTime = new Date(this.$moment(this.timeMonth1));
        const endTime = new Date(this.$moment(this.timeMonth2));
        if (startTime > endTime) {
          this.timeMonth2 = this.$moment(startTime).format("YYYY-MM");
          this.$Message.warning("开始时间不能大于结束时间");
          return;
        }
        clearTimeout(this.timeout);
        this.timeout = setTimeout(() => {
          this.goEchart(this.echartType);
        }, 500);
      }
    },
  },
  mounted() {
    this.searchList();
    // this.getOrgList();
    this.getFaultCategory("设备类型");
    this.getOrgList1()
  },
  methods: {
    getOrgList1() {
      this.axios({
        method: 'get',
        url: '/basic/organization/findListByToken',
        params: {level:1}
      }).then(res => {
        if (res.code === 200) {
          const obj = {
            label: 'name',
            value: 'code',
            children: 'children'
          }
          this.orgList = recursion.convertTree(res.data, obj)
        } else {
          this.$Message.warning(({content: res.msg, duration: 6, closable: true}));
        }
      })
    },
    //延时查询
    timeOutgetUserNo(query) {
      clearTimeout(this.timeout);
      let isSearchF = false;
      this.timeout = setTimeout(() => {
        if (query != "") {
          for (let item of this.userNoArr) {
            if (
              item.empno == query ||
              item.empno + "-" + item.realname == query ||
              item.realname == query
            ) {
              isSearchF = true;
            }
          }
          if (isSearchF == false) {
            this.getUserNo(query);
          }
        }
      }, 500);
    },
    getUserNo(query) {
      this.axios({
        method: "get",
        url: "/basic/user/searchUser",
        params: {
          key: query,
        },
      }).then((res) => {
        if (res.code === 200) {
          this.userNoArr = res.data;
        } else {
          this.$Message.warning({
            content: res.msg,
            duration: 6,
            closable: true,
          });
        }
      });
    },
    getCenterList(query) {
      if (query !== "") {
        this.axios({
          method: "get",
          url: "/dms/dcmMaintainDetail/queryPlans",
          params: {
            planName: query,
          },
        }).then((res) => {
          if (res.code === 200) {
            this.planList = res.data;
          } else {
            this.$Message.warning({
              content: res.msg,
              duration: 6,
              closable: true,
            });
          }
        });
      } else {
        this.planList = [];
      }
    },
    getEquipmentValue(device) {
      this.axios({
        method: "get",
        url: "/dms/dmsDevice/deviceInfoByOrgId",
        params: {
          deviceNo: device,
          // hierarchyCode:this.searchParams.orgId && this.searchParams.orgId.at(-1),
        },
      }).then((res) => {
        if (res.code == 200) {
          this.equipmentList = res.data;
        }
      });
    },
    remoteMethod1(query) {
      if (query !== "") {
        this.loading1 = true;
        setTimeout(() => {
          this.loading1 = false;
          this.getEquipmentValue(query); //以输入的设备名去查询
        }, 200);
      } else {
        this.equipmentList = [];
      }
    },
    //获取故障数据
    getFaultCategory(name) {
      this.axios({
        method: "get",
        url: "/dms/faultCategory/basicDict",
        params: { name },
      }).then((res) => {
        if (res.code === 200) {
          if (name === "故障分类") {
            this.faultCategoryList = res.data.map((item) => {
              if (item.value) return item;
            });
          } else if (name === "设备类型") {
            this.deviceTypeList = res.data.map((item) => {
              if (item.value) return item;
            });
          }
        } else {
          this.$Message.warning({
            content: res.msg,
            duration: 6,
            closable: true,
          });
        }
      });
    },
    openDate(type) {
      if (type === 3) {
        this.openYearShowF = true;
      }
    },
    goEchart(item) {
      this.echartType = item;
      let params = {};
      for (let key in this.searchParams) {
        if (this.searchParams[key]) {
          this.$set(params, key, this.searchParams[key]);
        }
      }
      params.type = this.dateType;
      // params.hierarchyCode = this.searchParams.hierarchyCode && this.searchParams.hierarchyCode.at(-1);
      if (this.dateType === "1") {
        params.startTime = this.$moment(this.timeList[0]).format("YYYY-MM-DD");
        params.endTime = this.$moment(this.timeList[1]).format("YYYY-MM-DD");
      }
      if (this.dateType === "2") {
        params.startTime = this.$moment(this.timeMonth1).format("YYYY-MM");
        params.endTime = this.$moment(this.timeMonth2).format("YYYY-MM");
      }
      if (this.dateType === "3") {
        params.startTime = this.$moment(this.timeYear1).format("YYYY");
        params.endTime = this.$moment(this.timeYear2).format("YYYY");
      }

      // params.orgCodes = this.searchParams.orgCodes.join(',')
      if (this.searchParams.orgCodes && this.searchParams.orgCodes.length){
        params.orgCodes = this.searchParams.orgCodes.join(',')
      }
      if (item === "1") {
        this.getEcharts1(params);
      }
      if (item === "2") {
        this.getEcharts2(params);
      }
      if (item === "3") {
        this.getEcharts3(params);
      }
      if (item === "4") {
        this.getEcharts4(params);
      }
      this.getTop(params);
    },
    getTop(params) {
      this.axios({
        method: "get",
        url: "/dms/maintenanceAnalysis/maintenanceTop",
        params: params,
      }).then((res) => {
        if (res.code === 200) {
          this.numList = res.data;
        } else {
          this.$Message.warning({
            content: res.msg,
            duration: 6,
            closable: true,
          });
        }
      });
    },
    getEcharts1(params) {
      this.axios({
        method: "get",
        url: "/dms/maintenanceAnalysis/maintenanceHourChart",
        params: params,
      }).then((res) => {
        if (res.code === 200) {
          let xdata = res.data.map((item) => {
            return item.time;
          });
          let ydata = res.data.map((item) => {
            return item.data;
          });
          this.showEChart(xdata, ydata,'');
        } else {
          this.$Message.warning({
            content: res.msg,
            duration: 6,
            closable: true,
          });
        }
      });
    },
    getEcharts2(params) {
      this.axios({
        method: "get",
        url: "/dms/maintenanceAnalysis/maintenanceRateChart",
        params: params,
      }).then((res) => {
        if (res.code === 200) {
          let xdata = res.data.map((item) => {
            return item.time;
          });
          let ydata = res.data.map((item) => {
            return item.data;
          });
          this.showEChart(xdata, ydata,'%');
        } else {
          this.$Message.warning({
            content: res.msg,
            duration: 6,
            closable: true,
          });
        }
      });
    },
    getEcharts3(params) {
      this.axios({
        method: "get",
        url: "/dms/maintenanceAnalysis/monthMaintenancePriceChart",
        params: params,
      }).then((res) => {
        if (res.code === 200) {
          let xdata = res.data.map((item) => {
            return item.time;
          });
          let ydata = res.data.map((item) => {
            return item.data;
          });
          this.showEChart(xdata, ydata,'');
        } else {
          this.$Message.warning({
            content: res.msg,
            duration: 6,
            closable: true,
          });
        }
      });
    },
    getEcharts4(params) {
      this.axios({
        method: "get",
        url: "/dms/maintenanceAnalysis/maintenanceCOTChart",
        params: params,
      }).then((res) => {
        if (res.code === 200) {
          let xdata = res.data.map((item) => {
            return item.time;
          });
          let ydata = res.data.map((item) => {
            return item.data;
          });
          this.showEChart(xdata, ydata,'%');
        } else {
          this.$Message.warning({
            content: res.msg,
            duration: 6,
            closable: true,
          });
        }
      });
    },
    // 获取使用位置
    getOrgList() {
      this.axios({
        method: "get",
        url: "/basic/organization/findListByToken",
        params: {},
      }).then((res) => {
        if (res.code === 200) {
          const obj = {
            label: "name",
            value: "code",
            children: "children",
          };
          this.orgList = recursion.convertTree(res.data, obj);
        } else {
          this.$Message.warning({
            content: res.msg,
            duration: 6,
            closable: true,
          });
        }
      });
    },
    reset(){
      this.searchParams = {};
      this.searchList();
    },
    searchList() {
      //查询列表
      let params = {
        ...this.searchParams
      };
      // for (let key in this.searchParams) {
      //   if (this.searchParams[key]) {
      //     this.$set(params, key, this.searchParams[key]);
      //   }
      // }
      params.type = this.dateType;
      // params.hierarchyCode = this.searchParams.hierarchyCode && this.searchParams.hierarchyCode.at(-1);
      if (this.searchParams.orgCodes && this.searchParams.orgCodes.length){
         params.orgCodes = this.searchParams.orgCodes.join(',')
      }
      this.getBox1(params);
      this.getBox2(params);
      this.getBox3(params);
      this.getBox4(params);
      this.goEchart("1");
    },
    getBox1(params) {
      this.axios({
        method: "get",
        url: "/dms/maintenanceAnalysis/monthMaintenanceHour",
        params: params,
      }).then((res) => {
        if (res.code === 200) {
          res.data = {
            ...res.data,
            avgDuration: this.formatNum(res.data.avgDuration),
            duration: this.formatNum(res.data.duration),
          };
          if(res.data.daily=='N/A'){
            res.data.upDay = false
            res.data.downDay = false
            res.data.dayNum = res.data.daily
          }else{
            if(Number(res.data.daily)>0){
              res.data.upDay = true
              res.data.downDay = false
            }else if(Number(res.data.daily)<0){
              res.data.upDay = false
              res.data.downDay = true
            }else{
              res.data.upDay = false
              res.data.downDay = false
            }
            res.data.dayNum = Math.abs(res.data.daily)+'%'
          }
          if(res.data.monthly=='N/A'){
            res.data.upMonth = false
            res.data.downMonth = false
            res.data.monthNum = res.data.monthly
          }else{
            if(Number(res.data.monthly)>0){
              res.data.upMonth = true
              res.data.downMonth = false
            }else if(Number(res.data.monthly)<0){
              res.data.upMonth = false
              res.data.downMonth = true
            }else{
              res.data.upMonth = false
              res.data.downMonth = false
            }
            res.data.monthNum = Math.abs(res.data.monthly)+'%'
          }
          this.box1 = res.data;
        } else {
          this.$Message.warning({
            content: res.msg,
            duration: 6,
            closable: true,
          });
        }
      });
    },
    getBox2(params) {
      this.axios({
        method: "get",
        url: "/dms/maintenanceAnalysis/maintenanceRate",
        params: params,
      }).then((res) => {
        if (res.code === 200) {
          this.box2 = res.data;
          if(res.data.daily=='N/A'){
            res.data.upDay = false
            res.data.downDay = false
            res.data.dayNum = res.data.daily
          }else{
            if(Number(res.data.daily)>0){
              res.data.upDay = true
              res.data.downDay = false
            }else if(Number(res.data.daily)<0){
              res.data.upDay = false
              res.data.downDay = true
            }else{
              res.data.upDay = false
              res.data.downDay = false
            }
            res.data.dayNum = Math.abs(res.data.daily)+'%'
          }
          if(res.data.monthly=='N/A'){
            res.data.upMonth = false
            res.data.downMonth = false
            res.data.monthNum = res.data.monthly
          }else{
            if(Number(res.data.monthly)>0){
              res.data.upMonth = true
              res.data.downMonth = false
            }else if(Number(res.data.monthly)<0){
              res.data.upMonth = false
              res.data.downMonth = true
            }else{
              res.data.upMonth = false
              res.data.downMonth = false
            }
            res.data.monthNum = Math.abs(res.data.monthly)+'%'
          }
        } else {
          this.$Message.warning({
            content: res.msg,
            duration: 6,
            closable: true,
          });
        }
      });
    },
    getBox3(params) {
      this.axios({
        method: "get",
        url: "/dms/maintenanceAnalysis/monthMaintenancePrice",
        params: params,
      }).then((res) => {
        if (res.code === 200) {
          res.data = {
            ...res.data,
            avgMaintenancePrice: this.formatNum(res.data.avgMaintenancePrice),
            maintenancePrice: this.formatNum(res.data.maintenancePrice),
          };
          if(res.data.daily=='N/A'){
            res.data.upDay = false
            res.data.downDay = false
            res.data.dayNum = res.data.daily
          }else{
            if(Number(res.data.daily)>0){
              res.data.upDay = true
              res.data.downDay = false
            }else if(Number(res.data.daily)<0){
              res.data.upDay = false
              res.data.downDay = true
            }else{
              res.data.upDay = false
              res.data.downDay = false
            }
            res.data.dayNum = Math.abs(res.data.daily)+'%'
          }
          if(res.data.monthly=='N/A'){
            res.data.upMonth = false
            res.data.downMonth = false
            res.data.monthNum = res.data.monthly
          }else{
            if(Number(res.data.monthly)>0){
              res.data.upMonth = true
              res.data.downMonth = false
            }else if(Number(res.data.monthly)<0){
              res.data.upMonth = false
              res.data.downMonth = true
            }else{
              res.data.upMonth = false
              res.data.downMonth = false
            }
            res.data.monthNum = Math.abs(res.data.monthly)+'%'
          }
          this.box3 = res.data;
        } else {
          this.$Message.warning({
            content: res.msg,
            duration: 6,
            closable: true,
          });
        }
      });
    },
    getBox4(params) {
      this.axios({
        method: "get",
        url: "/dms/maintenanceAnalysis/maintenanceCOT",
        params: params,
      }).then((res) => {
        if (res.code === 200) {
          if(res.data.daily=='N/A'){
            res.data.upDay = false
            res.data.downDay = false
            res.data.dayNum = res.data.daily
          }else{
            if(Number(res.data.daily)>0){
              res.data.upDay = true
              res.data.downDay = false
            }else if(Number(res.data.daily)<0){
              res.data.upDay = false
              res.data.downDay = true
            }else{
              res.data.upDay = false
              res.data.downDay = false
            }
            res.data.dayNum = Math.abs(res.data.daily)+'%'
          }
          if(res.data.monthly=='N/A'){
            res.data.upMonth = false
            res.data.downMonth = false
            res.data.monthNum = res.data.monthly
          }else{
            if(Number(res.data.monthly)>0){
              res.data.upMonth = true
              res.data.downMonth = false
            }else if(Number(res.data.monthly)<0){
              res.data.upMonth = false
              res.data.downMonth = true
            }else{
              res.data.upMonth = false
              res.data.downMonth = false
            }
            res.data.monthNum = Math.abs(res.data.monthly)+'%'
          }
          this.box4 = res.data;
        } else {
          this.$Message.warning({
            content: res.msg,
            duration: 6,
            closable: true,
          });
        }
      });
    },
    showEChart(x, y,t) {
      if (myChart != null && myChart != "" && myChart != undefined) {
        myChart.dispose(); //销毁
      }
      myChart = echarts.init(document.getElementById("echartId"));
      myChart.setOption({
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
            },
        },
        grid: {
          left: "5%",
          right: "5%",
          bottom: "5%",
          top: "15%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: x,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            barWidth: "20",
            data: y,
            type: "bar",
            tooltip: {
                valueFormatter: function (value) {
                return value + t;
                }
            },
          },
        ],
      });
      window.addEventListener("resize", function () {
        myChart.resize(); //myChart指自己定义的echartsDom对象
      });
    },
    formatNum(num) {
      if (num === null) {
        return 0;
      }
      let value = num + "";
      value = value.replace(/,/g, "");
      if (/^[1-9]\d*$/.test(value)) {
        value = value.replace(/(?=(?!\b)(?:\d{3})+(?!\d))/g, ",");
      }

      if (value.includes(".")) {
        let tempArr = value.split(".");
        if (Array.isArray(tempArr) && tempArr.length === 2) {
          const tempStr = tempArr[0].replace(
            /(?=(?!\b)(?:\d{3})+(?!\d))/g,
            ","
          );
          value = tempStr + "." + tempArr[1];
        }
      }

      return value;
    },
  },
};
</script>
<style scoped lang="scss">
.statisticsAnalysis {
  .tabsTitle {
    margin-top: 20px;
    height: 420px;
    box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, 0.1);
    position: relative;
    .tabsBtn {
      position: absolute;
      top: 8px;
      right: 10px;
      display: flex;
      .picker {
        display: flex;
        margin-left: 20px;
      }
    }
    .echartBox {
      height: 375px;
    }
    .tabletitle {
      height: 55px;
      display: flex;
      justify-content: center;
      align-items: center;
      span {
        font-size: 20px;
        font-weight: bold;
      }
    }
    .coltitle {
      background: #fff;
      height: 320px;
      overflow-y: auto;

      &::-webkit-scrollbar {
        width: 0px;
        height: 0px;
      }
        .header{
            .item{
                display: inline-block;
                margin: 15px 0;
                font-size: 14px;
                text-align: -webkit-center;
                font-weight: bold;
            }
        }

      .list {
        display: flex;
        text-align: center;

        .item {
          margin: 15px 0;
          font-size: 14px;
          text-align: -webkit-center;

          .num {
            width: 25px;
            height: 25px;
            line-height: 25px;
            background-color: rgba(24, 123, 219, 0.1);
            border-radius: 50%;
            color: #187bdb;
            text-align: center;
          }

          // color: #999;
        }
      }
    }
  }

  .tableBox {
    height: 200px;
    box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, 0.1);
    padding: 20px 20px 0px 20px;
    .boxtitle {
      font-size: 16px;
      width: 100%;
    }
    .boxNum {
      font-size: 30px;
      width: 100%;
      margin-bottom: 20px;
      span {
        font-size: 12px;
      }
    }
    .boxRatio {
      width: 100%;
      display: flex;
      margin-bottom: 20px;
      .ratio1 {
        width: 40%;
        font-size: 30px;
      }
      .ratio2 {
        width: 60%;
        position: relative;
        padding: 12px 0;
        .ratioLine {
          height: 20px;
          width: 100%;
          background: rgb(240, 242, 245);
          .lineBox {
            background: rgb(24, 144, 255);
            height: 100%;
          }
        }
        .ratioLine1 {
          position: absolute;
          left: 0;
          top: 7px;
          height: 30px;
          width: 100%;
          .lineBox {
            border-right: 1px solid rgb(24, 144, 255);
            height: 100%;
          }
        }
      }
    }
    .boxRate {
      font-size: 16px;
      width: 100%;
      height: 45px;
      display: flex;
      border-bottom: 1px solid #ddd;
      span {
        width: 50%;
        display: flex;
      }
    }
    .boxBottom {
      font-size: 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 45px;
    }
  }
}
</style>
<style lang="scss">
.statisticsAnalysis {
  .ivu-tabs-nav .ivu-tabs-tab {
    font-size: 20px;
  }
}
</style>
